<template>
  <div class="chooseItem" @click="showCard">
    <chooseCard v-if="isShowCard"></chooseCard>
    <div class="showImg"><img :src="img" alt=""></div>
    <div class="Name"><span>{{ region }}</span></div>
    <div class="describe">{{ brief }}</div>
    <div class="deleteBtn"><img src="~/assets/img/home/chouTi/删除.svg" alt=""></div>
  </div>
</template>

<script>
import { number } from 'echarts'
import chooseCard from './chooseCard.vue'

export default {
  name: 'chooseItem',
  components:{
    chooseCard
  },
  props:{
    region:{
      type: String,
      default: () => {
          return ''
      }
    },
    layer:{
      type:number,
      default: () =>{
        return 0
      }
    }
  },
  data() {
    return {
      isShowCard: false,//是否展示卡片
      // brief:'',//城市省份的简介
      // img:''//城市省份的图片
    }
  },
  computed:{
    brief(){
      if(this.layer == 3) return this.$store.state.scenicInf[this.region]?.brief
      else return this.$store.state.cityInf[this.region]?.brief
    },
    img(){
      if(this.layer == 3){
      return this.$store.state.scenicInf[this.region]?.images[0]
      }else{
       return this.$store.state.cityInf[this.region]?.image
      }
    }
  },
  created() {
    // if(this.layer == 3){
    //   console.log(this.region,this.$store.state.scenicInf[this.region]);
    //   this.brief = this.$store.state.scenicInf[this.region].brief
    //   this.img = this.$store.state.scenicInf[this.region].images[0]
    // }else{
    //   this.brief = this.$store.state.cityInf[this.region]?.brief
    //   this.img = this.$store.state.cityInf[this.region]?.image
    // }
    // console.log(this.region,this.brief,this.img);
    // console.log(1);
  },
  mounted() {
    // console.log(this.region);
    // console.log(this.$store.state.cityInf[this.region].brief);
    // this.brief = this.$store.state.cityInf[this.region].brief
    // this.img = this.$store.state.cityInf[this.region].image
    // console.log(this.region,this.brief,this.img);
  },
  methods: {
    showCard(){
      if(this.layer === 3) this.$router.push(`/scenicDetail/${this.region}`)
      else this.$bus.$emit('changeShowCard',this.region)
    }
  },
}
</script>

<style scoped>
.chooseItem {
    height: 5rem;
    background-color: #f5f5f5;
    margin: 0.5rem;
    border: 1px solid #9999b2;
    border-radius: 5px;
    display: flex;
    position: relative;
}
/* 设置图片展示样式 */
.showImg {
    flex: 1;
    padding: 0.5rem;
}
.showImg img {
    height: 100%;
    width: 100%;
}
/* 设置目的地名 */
.Name {
    flex: 1;
    text-align: center;
    display: table;
    /* background-color: pink; */
    color: black;
}

.Name span{
  display: table-cell;
  vertical-align: middle;
}
/* 设置目的地描述样式 */
.describe {
    flex: 2;
    background-color: #e2e2e2;
    font-size: 0.85rem;
    border-radius: 5px;
    margin-right: 1rem;
    margin-top: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    padding: 0.5rem;
    /* 设置多行溢出显示省略号 */
    overflow: hidden;
    display: -webkit-box;
    word-break:break-all ;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.125rem;
}
/* 设置删除按钮样式 */
.deleteBtn {
  position: absolute;
  bottom: 0;
  right: 0;

}
.deleteBtn img {
  height: 1rem;
}
</style>